<template>
  <div>
    <main>
      <el-table :data="tableData"
                v-loading="loading"
                style="width: 90%; margin: auto;">
        <el-table-column prop="nickName"
                         label="微信名">
        </el-table-column>
        <el-table-column prop="gender"
                         label="性别">
        </el-table-column>
        <el-table-column prop="province"
                         label="省份">
        </el-table-column>
        <el-table-column prop="city"
                         label="城市">
        </el-table-column>
        <el-table-column prop="level"
                         label="用户级别">
        </el-table-column>
        <el-table-column prop="createTime"
                         label="创建时间">
        </el-table-column>
      </el-table>
    </main>
    <footer>
      <el-pagination :current-page="pageNumber"
                     @current-change="currentPage"
                     :total="totalPage * 10"
                     background
                     hide-on-single-page
                     layout="prev, pager, next">
      </el-pagination>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      allData: [],
      tableData: [],
      totalPage: undefined,
      pageNumber: 1,
      pageSize: 9
    };
  },
  created() {
    this.currentPage(this.pageNumber);
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 500);
  },
  methods: {
    currentPage(value) {
      this.axios({
        method: "get",
        url: "/user/show",
        params: {
          pageSize: this.pageSize,
          pageNumber: value
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            this.totalPage = res.data.result.total;
            this.allData = res.data.result;
            this.tableData = res.data.result.list;
            for (let i = 0; i < this.tableData.length; i++) {
              this.tableData[i].gender =
                this.tableData[i].gender === 0 ? "男" : "女";
              this.tableData[i].createTime = this.getTime(
                this.tableData[i].createTime
              );
              if (this.tableData[i].level === 2) {
                this.tableData[i].level = "超级会员";
              } else if (this.tableData[i].level === 1) {
                this.tableData[i].level = "会员用户";
              } else {
                this.tableData[i].level = "普通用户";
              }
            }
          } else {
            this.message(res.data.msg, "error");
          }
        })
        .catch(error => {
          this.message(error, "error");
        });
    },
    // 时间戳转变成日期格式
    getTime(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() - 1;
      let day = date.getDate();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      date = year + "-" + month + "-" + day;
      return date;
    }
  }
};
</script>

<style scoped>
footer {
  float: right;
  margin: 25px 45px 20px 0;
}
</style>